import React, { Component } from 'react';
import FooterPage from '@components/layout/footerPage';
import { Menu, Table ,Breadcrumb,Drawer,theme, Tooltip} from 'antd';
import { useState } from 'react';
import axios from 'axios';
import { useEffect } from 'react';


const Opencommunication = (props) => {
  const [current, setCurrent] = useState('fifth-02');
  const [visitData, setvisitData] = useState([]);
  const [undergraduateData, setundergraduateData] = useState([]);
  const [postgraduateData, setpostgraduateData] = useState([]);
  const [teacherData, setteacherData] = useState([]);
  const [selectedVisit, setSelectedVisit] = useState(null);
  const [breadcrumbItems, setBreadcrumbItems] = useState([
    {
      title: '首页',
    },
    {
      title: '开放交流',
    },
    {
      title: '实验室参观',
    },
  ]);
  const handleClick = (e) => {
    setCurrent(e.key);
    const breadcrumb = [];

    breadcrumb.push({
      title: '首页',
    });
    breadcrumb.push({
      title: '开放交流',
    });

    if (e.key === 'project') {
      breadcrumb.push({
        title: '实验室参观',
      });
    } else {
      breadcrumb.push({
        title: '开放课题',
      });

      switch (e.key) {
        case 'undergraduate':
          breadcrumb.push({
            title: '本科生课题',
          });
          break;

        case 'postgraduate':
          breadcrumb.push({
            title: '研究生课题',
          });
          break;

        case 'teacher':
          breadcrumb.push({
            title: '青年教师课题',
          });
          break;

        default:
          break;
      }
    }


    setBreadcrumbItems(breadcrumb);
    const nonshowList = document.querySelectorAll('.nonshow5');
    nonshowList.forEach((element) => {
      element.classList.remove('show');
    });
    document.getElementById(e.key).classList.add('show');
  };


  useEffect(() => {
    const fetchData = async () => {
      try {
        const visitResponse = await axios.get('http://localhost:8080/web/lab_visit/list',{});
        const visitData = visitResponse.data.data
        console.log(visitResponse.data.data)
        setvisitData(visitData);


        const opentopicResponse = await axios.get('http://localhost:8080/web/lab_opentopic/list',{});
        console.log(opentopicResponse)
        console.log(opentopicResponse.data.data)
        const responseData = Array.from(opentopicResponse.data.data);
        // setprojectData(projectDataArray);
        console.log(responseData);
        const undergraduateDataArray = responseData.filter(item => item.type === '本科生');
        setundergraduateData(undergraduateDataArray);
  
        const postgraduateDataArray = responseData.filter(item => item.type === '研究生');
        setpostgraduateData(postgraduateDataArray);
  
        const teacherDataArray = responseData.filter(item => item.type === '青年教师');
        setteacherData(teacherDataArray);

      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

  const { token } = theme.useToken();
  const [open, setOpen] = useState(false);
  const showDrawer = (visit) => {
    setSelectedVisit(visit);
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  const containerStyle = {
    position: 'relative',
    height: 1000,
    // textAlign: 'center',
    background: '#FFFFFF',
    border: `1px solid ${token.colorBorderSecondary}`,
    borderRadius: token.borderRadiusLG,
  };
    const visitcolumns= [
      {
        title: '名称',
        dataIndex: 'name',
        width: 130,    
      },
      {
        title: '内容',
        dataIndex: 'text',
        width: 150,
        render: (text,record) => (
          <Tooltip title="点击查看">
          <span
            style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', display: 'inline-block', maxWidth: '150px', cursor: 'pointer' }}
            onClick={() => showDrawer(record)}
          >
            {text.length > 10 ? text.slice(0, 10) + '...' : text}
          </span>            
          </Tooltip>

        ),
      },
      {
        title: '开始时间',
        dataIndex: 'stime',
        width: 150,    
      },
      {
        title: '结束时间',
        dataIndex: 'etime',
        width: 150,    
      },
    ]
    const undergraduatecolumns=[
      {
        title:'课题名称',
        dataIndex :'name',
        width: 130,    
      },
      {
        title:'负责人',
        dataIndex :'creator',
        width: 130,    
      },
      {
        title:'立项时间',
        dataIndex :'stime',
        width: 130,    
      },
      {
        title:'状态',
        dataIndex :'state',
        width: 130,    
      }
    ]
    const postgraduatecolumns=[
      {
        title:'课题名称',
        dataIndex :'name',
        width: 130,    
      },
      {
        title:'负责人',
        dataIndex :'creator',
        width: 130,    
      },
      {
        title:'立项时间',
        dataIndex :'stime',
        width: 130,    
      },
      {
        title:'状态',
        dataIndex :'state',
        width: 130,    
      }
    ]  
    const teachercolumns=[
      {
        title:'课题名称',
        dataIndex :'name',
        width: 130,    
      },
      {
        title:'负责人',
        dataIndex :'creator',
        width: 130,    
      },
      {
        title:'立项时间',
        dataIndex :'stime',
        width: 130,    
      },
      {
        title:'状态',
        dataIndex :'state',
        width: 130,    
      }
    ]
    const paginationConfigt = {
      pageSize: 12, // 每页显示的条数
    };

    return (
        <div className={'opencommunication'}>
        <div className={'content05'}>
          {/*左导航*/}
          <div className={'left-box-05'}>
            <div className={'kong-05'}></div>
            <Menu  style={{fontSize:"18px"}} onClick={handleClick} selectedKeys={[current]} mode="inline">
            <Menu.Item key="fifth-02">实验室参观</Menu.Item>
            <Menu.SubMenu key="open" title="开放课题">
                <Menu.Item key="undergraduate">本科生课题</Menu.Item>
                <Menu.Item key="postgraduate">研究生课题</Menu.Item>
                <Menu.Item key="teacher">青年教师课题</Menu.Item>
            </Menu.SubMenu>
            </Menu>    
          </div>
          {/*右展示框*/}
          <div className={'right-box-05'}>
            <div className={'right-top-05'}>
              <p id="">开放交流</p>
              <div className={'nav-path fifth'}>
              <span>
            <Breadcrumb style={{marginTop:"10px"}} items={breadcrumbItems} />              
          </span>
              </div>
            </div>
            <div className={'nonshow5 show'} id="fifth-02">
            <Table dataSource={visitData} columns={visitcolumns} pagination={paginationConfigt}/>
            <pre>
            <Drawer   
              placement="bottom"
              closable={false}
              onClose={onClose}
              open={open}
              getContainer={false}
              style={containerStyle}
            >
              <div className='visittitle'>
                {selectedVisit && <span>{selectedVisit.name}</span>}
              </div>
              <div className='visittext'>
                {selectedVisit && <p>{selectedVisit.text}</p>}
              </div> 
            </Drawer> 
               </pre>           
            </div>
            <div className={'nonshow5'} id="undergraduate">
            <Table dataSource={undergraduateData} columns={undergraduatecolumns}/>
            </div>
            <div className={'nonshow5'} id="postgraduate">
            <Table dataSource={postgraduateData} columns={postgraduatecolumns}/>
            </div>
            <div className={'nonshow5'} id="teacher">
            <Table dataSource={teacherData} columns={teachercolumns}/>
            </div>

          </div>
        </div>
        <FooterPage />
      </div>
    );
  }


export default Opencommunication;